<template>
  <div class="app-container">
      <h2>公告列表</h2>
      <!-- 查询 -->
      <el-form :inline="true" class="demo-form-inline">
         <el-form-item label="名称">
            <el-input  v-model="searchObj.title" placeholder="名字"/>
         </el-form-item>

         <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
      </el-form>

      <!-- 工具条 -->
      <div>
         <el-button type="danger" size="mini" @click="removeRows()">批量删除</el-button>
      </div>

      <!-- 预约列表 -->
      <el-table
      :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55"/>
         <el-table-column type="index" width="50" label="序号"/>
         <el-table-column prop="updateTime" label="发布时间"/>
         <el-table-column prop="title" label="标题"/>
         <el-table-column prop="info" label="内容"/>  
         <el-table-column label="操作" width="280" align="center">
            <template slot-scope="scope">
               <el-button type="danger" size="mini" 
                  icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            <router-link :to="'/notice/edit/'+scope.row.id">
               <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
            </router-link>
            </template>
         </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
      :current-page="current"
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList"/>
  </div>
</template>

<script>
import notice from '@/api/notice'
export default {
    //定义变量和初始值
    data() {
        return{
                current:1,//当前页
                limit:5,//每页显示记录数
                searchObj:{},//条件封装数据
                list:[],//每页数据集合
                total:0,//总记录数
                multipleSelection: [] // 批量选择中选择的记录列表
            }
    },
    created() { //在页面渲染之前执行
    //一般调用methods定义的方法，得到数据
        this.getList()
    },
    methods: {
       //锁定和取消锁定
      // lockStaff(id,status) {
      //    staff.lockStaff(id,status)
      //       .then(response => {
      //          //刷新
      //          this.getList()
      //       })
      // },
       //获取选择复选框的id值
      handleSelectionChange(selection) {
         this.multipleSelection = selection
      },
       //批量删除
      removeRows() {
         this.$confirm('此操作将永久删除公告信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => { //确定执行then方法
            var idList = []
            //遍历数组得到每个id值，设置到idList里面
            for(var i=0;i<this.multipleSelection.length;i++) {
               var obj = this.multipleSelection[i]
               var id = obj.id
               idList.push(id)
            }
            //调用接口
            notice.batchRemoveNotice(idList)
               .then(response => {
                  //提示
                  this.$message({
                     type: 'success',
                     message: '删除成功!'
                  })
                  //刷新页面
                  this.getList(1)
               })
         })
      },
        getList(page=1){
            this.current = page
            notice.getNoticeList(this.current,this.limit,this.searchObj)
            .then(response => { //请求成功response是接口返回数据
            //返回集合赋值list
                this.list = response.data.records
                //总记录数
                this.total = response.data.total
                console.log(response)
            })//请求成功
            .catch(error => {//请求失败
                console,log(error)
            })//请求失败
        },

        //删除医院设置的方法
      removeDataById(id) {
         this.$confirm('此操作将永久公告信息, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
         }).then(() => { //确定执行then方法
            //调用接口
            notice.deleteNotice(id)
               .then(response => {
                  //提示
                  this.$message({
                     type: 'success',
                     message: '删除成功!'
                  })
                  //刷新页面
                  this.getList(1)
               })
         })
      }

    }

}
</script>

<style>

</style>